<template>
  <div class="home">
    <van-nav-bar
      title="安心维权通道"
      class="nav_bar"
      fixed
      @click-left="onClickLeft"
    />
    <div class="btns">
      <van-image
        class="btns_icon"
        :src="require('@/assets/icon/home/weiquan.png')"
        @click="add"
      />
      <van-image
        class="btns_icon"
        :src="require('@/assets/icon/home/12345.png')"
        @click="goToPhone"
      />
    </div>
    <div class="tabas">
      <van-tabs
        v-model="active"
        type="card"
        background="rgba(255,255,255,0.2)"
        title-active-color="#fff"
        title-inactive-color="#333"
        @change="tabChange"
      >
        <van-tab title="最新维权" :name="1"></van-tab>
        <van-tab title="经典案例" :name="2"></van-tab>
        <van-tab title="热点消费咨询" :name="3"></van-tab>
      </van-tabs>
      <div class="list">
        <van-list
          v-model="loading"
          :finished="finished"
          :finished-text="list.length > 0 ? '没有更多了' : ''"
          @load="onLoad"
        >
          <!-- <van-cell v-for="item in list" :key="item" :title="item" /> -->
          <weiquanItem v-for="(v, i) in list" :key="i" :item="v"></weiquanItem>
          <van-empty
            v-if="!loading && list.length == 0"
            description="暂无数据"
          />
        </van-list>
      </div>
    </div>
  </div>
</template>

<script>
import weiquanItem from "@/components/weiquanItem.vue";
import api from "@/api/api";
export default {
  components: { weiquanItem },
  props: {},
  data() {
    return {
      active: 1,
      list: [],
      loading: false,
      finished: false,
      pageInfo: {
        pageSize: 10,
        pageNum: 1,
      },
    };
  },
  watch: {},
  computed: {},
  methods: {
    onClickLeft() {
      this.$router.back();
    },
    onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      this.getArticleList();
    },
    goToPhone() {
      window.location.href = "tel:12345";
    },
    add() {
      this.$router.push({
        path: "/addWeiquan",
      });
    },
    async getArticleList() {
      let res = await api.getWeiquanArticle({
        contentType: this.active,
        ...this.pageInfo,
      });
      this.list = [...this.list, ...res.data];
      if (res.data.length < this.pageInfo.pageSize) {
        this.finished = true;
      } else {
        this.pageInfo.pageNum++;
      }
      this.loading = false;
    },
    tabChange() {
      this.pageInfo.pageNum = 1;
      this.list = [];
      this.loading = true;
      this.onLoad();
    },
  },
  created() {},
  mounted() {},
};
</script>
<style lang="less" scoped>
.home {
  min-height: 100vh;
  background: url("https://zxcxappimg.oss-cn-hangzhou.aliyuncs.com//zxcxmall/2025/05/29/44dea588672142d48f873df92c7b625e.jpg")
    no-repeat;
  background-size: contain;
  background-attachment: fixed;
  background-position: top;
  box-sizing: border-box;
  padding: 200px 50px 150px 50px;
  .btns {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .btns_icon {
      height: 302px;
      width: auto;
      margin: 0 15px;
    }
  }
  .tabas {
    margin-top: 100px;
    /deep/ .van-tabs__nav--card {
      border: unset;
      .van-tab {
        border: unset;
        color: #333;
      }
    }
    /deep/ .van-tab--active {
      background: #058efb;
    }
  }

  .list {
    margin-top: 50px;
  }
  .nav_bar {
    /deep/ .van-icon {
      font-size: 50px;
      font-weight: bold;
      color: #333333;
    }
  }
}
</style>
